<script setup lang="tsx">
import { defineExpose, reactive, ref } from 'vue';
import { getPressCodeList } from '@/service/api/modules/collection-management/equipment-alarm-info';

const equipmentId = ref<any>(null);

const columns = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'equipmentId',
    dataIndex: 'equipmentId',
    title: '设备代码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'description',
    dataIndex: 'description',
    title: '设备描述',
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);
const currentSelect = ref(null);
const rowSelection = ref({
  type: 'radio',
  onChange: val => {
    currentSelect.value = val[0];
  }
});
const tableData = ref([]);
const loading = ref(false);

const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    getTableData();
  }
});
function search() {
  pagination.current = 1;
  getTableData();
}

function reset() {
  equipmentId.value = null;
  pagination.current = 1;
  getTableData();
}

function getTableData() {
  const params = {
    equipmentId: equipmentId.value,
    pageSize: pagination.pageSize,
    pageNum: pagination.current
  };
  loading.value = true;
  getPressCodeList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
        });
        pagination.total = data.total;
        tableData.value = data.list;
      }
    })
    .finally(() => (loading.value = false));
}

getTableData();

defineExpose({
  currentSelect
});
</script>

<template>
  <div class="jl-main-page h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ACard :title="null" :bordered="false" class="search-card card-wrapper">
      <AForm
        :label-col="{
          span: 5,
          md: 7
        }"
        class="search-form"
      >
        <div class="w-full flex">
          <ARow :gutter="[15, 8]" wrap class="w-full">
            <ACol :span="24" :md="12" :lg="8" :xl="8" :xxl="8">
              <AFormItem label="设备代码" name="equipmentId" class="m-0" :label-col="{}">
                <AInput
                  v-model:value="equipmentId"
                  placeholder="请输入设备代码"
                  class="min-form-control"
                  allow-clear
                  autocomplete="off"
                  @keypress.enter="search"
                />
              </AFormItem>
            </ACol>
            <div class="flex">
              <AFormItem class="m-0">
                <div class="w-full flex-y-center justify-end gap-12px">
                  <AButton type="primary" ghost class="mini-btn" @click="search">
                    <template #icon>
                      <icon-ic-round-search class="align-sub text-icon" />
                    </template>
                    <span class="ml-3px">搜索</span>
                  </AButton>
                  <AButton class="mini-btn" @click="reset">
                    <template #icon>
                      <icon-ic-round-refresh class="align-sub text-icon" />
                    </template>
                    <span class="ml-3px">重置</span>
                  </AButton>
                </div>
              </AFormItem>
            </div>
          </ARow>
        </div>
      </AForm>
    </ACard>
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>
      <STable
        :columns="columns"
        :data-source="tableData"
        bordered
        :row-selection="rowSelection"
        size="small"
        :loading="loading"
        row-key="equipmentId"
        :pagination="pagination"
        :scroll="{ x: 'auto', y: 'auto' }"
        :row-height="23"
        class="h-full"
      />
    </ACard>
  </div>
</template>

<style></style>
